<template>
	<view class="contents">
		<view class="topbgc">
				<view class="leftarrow"  @click="gotoBack">
					<image src="../../static/backwhite.png" mode=""></image>
				</view>
				<view class="title">
					提现记录
				</view>

		</view>
		<view class="mingxi" v-for="(item,index) in recordlist" :key="index">
			<view class="left">
				<view class="withdrawal">
					<!-- {{item.title}} -->提现
				</view>
				<view class="time">
					通过时间:{{item.add_time}}
				</view>
			</view>
			<view class="right">
				<view class="num">
					{{item.extract_price}}元
				</view>
				<view class="status" :class="item.status==-1?'red':(item.status==0?'gray':'yellow')">
					{{item.status | guoLv}}
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		withdrawalRecord
	} from  '@/api/api.js'
	export default {
		data() {
			return {
                  recordlist:[],
				  page:1,    //当前页数
				  pages:''  
			}
		},
		filters:{
			guoLv(value) {
				if(value==-1){return value = '已驳回'}
				if(value==0){return value = '待审核'}
				if(value==1){return value = '已通过'}
			}
		},
		onLoad() {
			this.withdrawalRecord()
		},
		onReachBottom() {
			this.page = this.page + 1
			uni.showLoading({
				title:'加载中',
				duration:1500
			})
			let time = setTimeout(() => {
				let data = `page=${this.page}&limit=10`;
				withdrawalRecord(data).then(res => {
					console.log(res)
					if (res.data.code == '200'&&res.data.data.list.length!=0) {
						uni.hideLoading()
						this.recordlist.push(...res.data.data.list)
						// console.log(this.recordlist)
						this.pages = res.data.data.page
					 } else {
						 uni.showToast({
						 	title:'没有更多数据了',
						 	icon:'error',
						 	duration:1500
						 })
					 }
				})
				clearTimeout(time)
			}, 1500)
		},
		methods: {
			// 返回上一页
               gotoBack() {
				   uni.navigateBack()
			   },
			// 提现记录
			withdrawalRecord() {
				let data = `page=${this.page}&limit=10`
				withdrawalRecord(data).then(res => {
					console.log(res)
					if(res.data.code='200') {
						this.recordlist = res.data.data.list
						this.pages = res.data.data.page
						console.log(this.recordlist)
						console.log(this.pages)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(247, 249, 252);

		.topbgc {
			display: flex;
			align-items: center;
			background-color: #1AB374;
			margin-bottom: 12rpx;
			height: 180rpx;
			position: relative;
				.leftarrow {
				width: 36rpx;
				height: 36rpx;
                position: absolute;
				left: 28rpx;
				bottom: 26rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.title {
				position: absolute;
				bottom: 26rpx;
				left: 50%;
				transform: translateX(-50%);
				color: #fff;
			}
		}
		.mingxi {
			width: 694rpx;
			box-sizing: border-box;
			margin: 0 auto 18rpx;
			padding: 28rpx;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.withdrawal {
					font-weight: 600;
				}
				.time {
					color: #999;
					font-size: 24rpx;
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				.num {
					font-size: 32rpx;
					color: #ED742E;
					font-weight: 600;
				}
				.status {
					font-size: 24rpx;
				}
			}
		}
		.red {
			color:red;
		}
		.yellow {
			color: #ED742E;
		}
		.gray {
			color:gray;
		}
	}
</style>
